<template>
	<view class="layout pageBg">
		<view class="statusbar" :style="{height:statusBarHeight() + 'px'}"></view>
		<view class="registhead" :style="{height:TitleBarHeight() + 'px'}">
			<view class="goBack" @click="goback">
				<uni-icons type="back" size="20"></uni-icons>
			</view>
		</view>
		<view class="registTitle">
			<view class="largerow">
				<text class="largetext">新用户注册</text> 
			</view>
			<view class="smallrow">
				<text class="smalltext">请设置您的账号密码</text>
			</view>
		</view>
		<view class="registBody">
			<view class="userType">
				<view class="typeSelect">
					<button @click="select">选择用户类型</button>
					<text>您是：{{selection}}</text>
				</view>
			</view>
			<view class="username">
				<view class="phone">
					<uni-icons type="person" size="24"></uni-icons>
				</view>
				<view class="usernameinput">
					<input v-model="username" type="text" placeholder="请设置用户名" />
				</view>
			</view>
			<view class="phonenumber">
				<view class="phone">
					<uni-icons type="person" size="24"></uni-icons>
				</view>
				<view class="phoneinput">
					<input v-model="phonenumber" type="text" placeholder="请设置账号" />
				</view>
			</view>
			<view class="password">
				<view class="lock">
					<uni-icons type="locked" size="25"></uni-icons>
				</view>
				<view class="passwordinput">
					<input v-model="password" :type="passwordStatus" placeholder="请设置密码" />
				</view>
				<view class="eye" @click="changeEye">
					<uni-icons custom-prefix="iconfont" :type="eyeStatus" size="15"></uni-icons>
				</view>
			</view>
			<view class="password">
				<view class="lock">
					<uni-icons type="info" size="25"></uni-icons>
				</view>
				<view class="passwordinput">
					<input v-model="code" type="text" placeholder="请输入验证码" />
				</view>
			</view>
			<view class="registButton">
					<button @click="regist">注 册</button>
			</view>
			<view class="changeregist">
					<text>欢迎加入智慧教育！</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { statusBarHeight , TitleBarHeight , navBarHeight } from '../../utils/system.js'
	const bool = ref(false)
	const eyeStatus = ref('icon-icon-eye-close')
	const passwordStatus = ref('password')
	const changeEye = ()=>{
		bool.value = !bool.value
		bool.value === false ? eyeStatus.value = 'icon-kaiyan' : eyeStatus.value = 'icon-icon-eye-close'
		bool.value === false ? passwordStatus.value = 'safe-password' : passwordStatus.value = 'password'
	}
	changeEye()
	const arr = ['学生','教师','管理'] 
	const selection = ref('')
	const user = ref({})
	// const regist = ()=>{
		
	// }
	function goback(){
		uni.navigateBack()
	}
	function select(){
		uni.showActionSheet({
			title:"请选择",
			itemList:arr,
			success(res) {
				selection.value = arr[res.tapIndex]
			}
		})
	}
</script>

<style lang="scss" scoped>
	.layout{
			width: 100vw;
			height: 100vh;
		.registhead{
			display: flex;
			padding: 12rpx 30rpx 12rpx 30rpx;
			justify-content: space-between;
			
			.goBack{
				padding: 10rpx;
			}
		}
		.registTitle{
			margin-top: 120rpx;
			.largetext{
				display: flex;
				justify-content: center;
				font-size: 32px;
				font-weight: 500;
				color:#000;
			}
			.smalltext{
				display: flex;
				margin: 30rpx auto;
				justify-content: center;
				font-size: 13px;
				font-weight: 400;
				line-height: 18.82px;
				color: rgba(150, 151, 153, 1);
			}
		}
		.registBody{
			padding: 12rpx 32rpx 12rpx 32rpx;
			.userType{
				margin-bottom: 30rpx;
				display: flex;
				.typeSelect{
					display: flex;
				button{
					display: block;
					line-height: 50rpx;
					border-radius: 50rpx;	
					padding-left: 30rpx;
					margin-right: 30rpx;
					font-size: 13px;
					font-weight: 400;
					letter-spacing: 0px;
					color: white;
					background-color: rgba(22, 93, 255, 1);
					// line-height: 20px;
				}
				text{
					display: block;
					line-height: 50rpx;
					border-radius: 50rpx;	
					padding-left: 30rpx;
					padding-right: 30rpx;
					font-size: 13px;
					font-weight: 400;
					letter-spacing: 0px;
					background-color: white;
				}
				}
			}
			.username{
				padding: 15rpx 32rpx 15rpx 32rpx;
				margin-bottom: 30rpx;
				display: flex;
				// border: 1px solid black;
				border-radius:50rpx;
				align-items: center;
				background-color: white;
				.phone{
					width: 10%;
				}
				.usernameinput{
					flex: 1;
					padding-left: 30rpx;
					font-size: 23rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 30rpx;
					color: rgba(200, 201, 204, 1);
					text-align: left;
					vertical-align: middle;
				}
			}
			.phonenumber{
				padding: 15rpx 32rpx 15rpx 32rpx;
				display: flex;
				// justify-content: space-around;
				align-items: center;
				// border: 1px solid black;
				background-color: white;
				border-radius:50rpx;
				.phone{
					width: 10%;
				}
				.phoneinput{
					flex:1;
					padding-left: 30rpx;
					font-size: 23rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 30rpx;
					color: rgba(200, 201, 204, 1);
					text-align: left;
					vertical-align: middle;
				}
				
				// justify-content: space-between;
			}
			.password{
				padding: 15rpx 32rpx 15rpx 32rpx;
				margin-top: 30rpx;
				display: flex;
				// border: 1px solid black;
				border-radius:50rpx;
				align-items: center;
				background-color: white;
				.lock{
					width: 10%;
				}
				.eye{
					width: 5%;
				}
				.passwordinput{
					flex: 1;
					padding-left: 30rpx;
					font-size: 23rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 20rpx;
					color: rgba(200, 201, 204, 1);
					text-align: left;
					vertical-align: middle;
				}
			}
			.registButton{
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				margin-bottom: 48rpx;
				margin-top: 60rpx;
				height: 80rpx;
				
				// navigator{
				// 	width: 90vw;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
					button{
						color: white;
						line-height: 80rpx;
						background-color: rgba(22, 93, 255, 1);
						width: 90vw;
						border-radius: 50rpx;
					// }
				}
			}
			.changeregist{
				display: flex;
				text-align: center;
				justify-content: center;
				align-items: center;
				text{
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 20px;
					color: rgba(48, 110, 247, 1);
					text-align: center;
					vertical-align: middle;
				}	
			}
		}
	}
</style>
